.slider {
border-color: transparent;
border-style: solid;
- background-color: mix($bg_color, $fg_color, 70%);
+ background-color: mix($fg_color, $bg_color, 40%);
background-clip: padding-box; // needed since we use the borders as margins
- &:hover { background-color: mix($bg_color, $fg_color, 50%); }
+ &:hover { background-color: mix($fg_color, $bg_color, 60%); }
- &:prelight:active { background-color: $selected_bg_color; }
+ &:prelight:active { background-color: if($variant=='light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 10%));}
- &:backdrop { background-color: mix($backdrop_bg_color, $backdrop_fg_color, 60%); }
+ &:backdrop { background-color: mix($backdrop_fg_color, $backdrop_bg_color, 40%); }
&:insensitive {
background-color: transparent;
.scrollbar .slider {
border-color: transparent;
border-style: solid;
- background-color: #6f7372;
+ background-color: #818584;
background-clip: padding-box; }
.scrollbar.overlay-indicator.dragging.vertical .slider:hover, .scrollbar.overlay-indicator.hovering.vertical .slider:hover, .scrollbar.overlay-indicator.dragging.horizontal .slider:hover, .scrollbar.overlay-indicator.hovering.horizontal .slider:hover,
.scrollbar .slider:hover {
- background-color: #939695; }
+ background-color: #a5a8a6; }
.scrollbar.overlay-indicator.dragging.vertical .slider:prelight:active, .scrollbar.overlay-indicator.hovering.vertical .slider:prelight:active, .scrollbar.overlay-indicator.dragging.horizontal .slider:prelight:active, .scrollbar.overlay-indicator.hovering.horizontal .slider:prelight:active,
.scrollbar .slider:prelight:active {
- background-color: #215d9c; }
+ background-color: #2a76c6; }
.scrollbar.overlay-indicator.dragging.vertical .slider:backdrop, .scrollbar.overlay-indicator.hovering.vertical .slider:backdrop, .scrollbar.overlay-indicator.dragging.horizontal .slider:backdrop, .scrollbar.overlay-indicator.hovering.horizontal .slider:backdrop,
.scrollbar .slider:backdrop {
background-color: #5d6161; }
.scrollbar .slider {
border-color: transparent;
border-style: solid;
- background-color: #b3b5b6;
+ background-color: #a0a3a3;
background-clip: padding-box; }
.scrollbar.overlay-indicator.dragging.vertical .slider:hover, .scrollbar.overlay-indicator.hovering.vertical .slider:hover, .scrollbar.overlay-indicator.dragging.horizontal .slider:hover, .scrollbar.overlay-indicator.hovering.horizontal .slider:hover,
.scrollbar .slider:hover {
- background-color: #8d9091; }
+ background-color: #7a7e7f; }
.scrollbar.overlay-indicator.dragging.vertical .slider:prelight:active, .scrollbar.overlay-indicator.hovering.vertical .slider:prelight:active, .scrollbar.overlay-indicator.dragging.horizontal .slider:prelight:active, .scrollbar.overlay-indicator.hovering.horizontal .slider:prelight:active,
.scrollbar .slider:prelight:active {
- background-color: #4a90d9; }
+ background-color: #2a76c6; }
.scrollbar.overlay-indicator.dragging.vertical .slider:backdrop, .scrollbar.overlay-indicator.hovering.vertical .slider:backdrop, .scrollbar.overlay-indicator.dragging.horizontal .slider:backdrop, .scrollbar.overlay-indicator.hovering.horizontal .slider:backdrop,
.scrollbar .slider:backdrop {
background-color: #c6c7c8; }